<template>
    <div class="homePage">
        <!-- 头部 -->
        <div class="home">
            <div class="logo"></div>
            <div class="left-btns">
                <div class="round">
                    <img class="menu" src="@/assets/home/menu.png" @click="menusClick" />
                </div>
            </div>
            <!-- 中间 -->
            <div class="tabs">
                <span v-for="(item, index) in data.list" :key="index" :id="item.pathId"
                    :class="item.id == data.selectIndex ? 'list listSelect' : 'list'" @click="selectTab(index, item)">{{
                        item.name }}</span>
            </div>
            <!-- 右边人员 -->
            <div class="right-btns">
                <div class="dropdown">
                    <el-dropdown>
                        <span class="el-dropdown-link">
                            {{ data.loginName }}
                            <el-icon class="el-icon--right">
                                <arrow-down />
                            </el-icon>
                        </span>
                        <template #dropdown>
                            <div class="user-info">
                                <img class="avatar" src="./img/get.png" />
                                <p class="loginName">{{ data.loginName + '（' + data.jobNo + '）' }}</p>
                                <p class="job">{{ $t('webAuto.staff')  }}</p>
                                <p class="corporation">{{ $t('payroll.Eletile')  }}</p>
                                <p class="deptName">{{ data.deptName }}</p>
                                <div class="profile">
                                    <div class="profile-boxs">
                                        <div class="profile-avatar">
                                            <el-icon class="icon-prfile">
                                                <Avatar />
                                            </el-icon>
                                            <span class="profile-text">{{ $t('webAuto.profilePicture')  }}</span>
                                        </div>
                                        <!-- 資料修改  -->
                                        <div class="dataInfor profile-avatar">
                                            <el-icon class="icon-prfile2">
                                                <Edit />
                                            </el-icon>
                                            <span class="profile-text" @click="showUserCenter">{{ $t('webAuto.information')  }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </el-dropdown>
                </div>
                <div class="language">
                    <div v-for="(item, index) in languageList" :key="index"
                        :class="langIndex == index ? 'language-item' : 'language-item2 language-item'"
                        @click="changeLanguage(index)">
                        <img class="icon" src="@/assets/language/china.png" alt="china" v-if="index == 0" />
                        <img class="icon" src="@/assets/language/MG.png" alt="china" v-if="index == 1" />
                        <img class="icon" src="@/assets/language/MXG.png" alt="china" v-if="index == 2" />
                        <span class="text">{{ item }}</span>
                    </div>
                </div>
                <!-- <div class="inform" @click="showUserCenter">
                    <img class="icon-infor" src="@/assets/home/infor.png" />
                </div> -->
                <div class="message inform ">
                    <el-popover placement="bottom-end" width="300" trigger="click">
                        <div class="notify">
                            <el-empty :image-size="50" :description="$t('webAuto.NoNews')" v-if="notify.total === 0"></el-empty>
                            <div v-for="msg in notify.records" :key="msg.id" class="notify-item">
                                <el-row>
                                    <el-col :span="2">
                                        <div class="notify-item-type-icon">
                                            <el-icon v-if="msg.type === 'SUCCESS'" color="#02b068">
                                                <SuccessFilled />
                                            </el-icon>
                                            <el-icon v-else-if="msg.type === 'WARNING'" color="#f78f5f">
                                                <WarningFilled />
                                            </el-icon>
                                            <el-icon v-else-if="msg.type === 'ERROR'" color="#f25643">
                                                <CircleCloseFilled />
                                            </el-icon>
                                            <el-icon v-else color="#8c8c8c">
                                                <InfoFilled />
                                            </el-icon>
                                        </div>
                                    </el-col>
                                    <el-col :span="22">
                                        <div class="notify-item-title" @click="toNotify(msg)">{{ msg.title }}</div>
                                        <ellipsis hoverTip class="notify-item-content" :content="msg.content" />
                                    </el-col>
                                </el-row>
                                <span class="notify-item-time">{{ msg.createTime.substring(5, 16) }}</span>
                                <el-button type="primary" link class="notify-btn"
                                    @click="readNotifyClick(msg.id)">{{ $t('webAuto.READ') }}</el-button>
                            </div>
                        </div>
                        <div class="notify-action" v-show="notify.total > 0">
                            <el-button type="primary" link @click="--params.pageNo"
                                :disabled="params.pageNo <= 1">{{ $t('webAuto.previousPage') }}</el-button>
                            <el-button type="primary" link @click="readNotifyClick(null)">{{ $t('webAuto.hasRead') }}</el-button>
                            <el-button type="primary" link @click="++params.pageNo"
                                :disabled="notify.total <= params.pageSize * notify.current">{{ $t('webAuto.nextPage') }}
                            </el-button>
                        </div>
                        <template #reference>
                            <el-badge :hidden="notify.total === 0" :value="notify.total">
                                <el-icon>
                                    <Bell />
                                </el-icon>
                            </el-badge>
                        </template>
                    </el-popover>
                </div>
                <div class="inform" @click="quit">
                    <img class="icon-infors" src="@/assets/home/quit.png" />
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <div class="footer">
            <!-- 企业门户 -->
            <div class="footer-container" v-if="data.selectIndex == 0">
                <div class="first">
                    <!-- 企业新闻 -->
                    <div class="card">
                        <Card :header="$t('webAuto.EnterpriseNews')" :contentStyle="'first'" :list="data.newsList" />
                    </div>
                    <!-- 轮播图 -->
                    <div class="carousel">
                        <Slideshow />
                    </div>
                    <!-- 通知公告 -->
                    <div class="card" style="margin:0">
                        <Card :header="$t('webAuto.notice')" :contentStyle="'second'" :list="data.noticeList" />
                    </div>
                </div>
                <div class="second first">
                    <!-- 培训计划 -->
                    <div class="card">
                        <Card :header="$t('webAuto.trainingPlan')" :contentStyle="'third'" :list="data.trainingList" />
                    </div>
                    <!-- 流程数据 -->
                    <div class="carousel">
                        <Process :header="[$t('webAuto.todoList'), $t('webAuto.AlreadyDone'), $t('webAuto.Application'), $t('webAuto.MyCC')]" :selectHeader="0" @setMine="getMine"
                            :mineList="data.mineList" />
                    </div>
                    <!-- 管理制度 -->
                    <div class="card" style="margin:0">
                        <Card :header="$t('webAuto.managementSystem')" :contentStyle="'four'" :list="data.managementList" />
                    </div>
                </div>
                <div class="third first">
                    <!--  -->
                    <div class="card">
                        <CardList :header="[$t('webAuto.EmployeeActivities'), $t('webAuto.EllieBriefing')]" :selectHeader="data.bulleNo" @setList="getList"
                            :list="data.containerList" />
                    </div>
                    <!-- 安全环保 -->
                    <div class="carousel">
                        <Card :header="$t('webAuto.SafetyEnvironmental')" :contentStyle="'second'" :list="data.secureList" />
                    </div>
                    <!-- 通用系统 常用流程 -->
                    <div class="card" style="margin:0">
                        <Flow :header="[$t('webAuto.generalSystem'), $t('webAuto.CommonProcesses')]" :selectHeader="0" :systemList="data.systemList"
                            :flowList="data.flowList" @setSystem="getSystem" />
                    </div>
                </div>
            </div>
            <!-- 流程中心 -->
            <div class="processCenter" v-if="data.selectIndex == 1" style="background-color: #fff;">
                <div class="workSpace">
                    <work-space @getchildren="oncFur" :active="data.active"></work-space>
                </div>
                <div :class="data.menus == 'forms' ? 'fromsApp2' : 'fromsApp'">
                    <froms-app :hide="true" style="margin-left:-20px;" v-if="data.menus == 'forms'"></froms-app>
                    <un-finished :hide="true" style="margin-left:-20px;"
                        v-if="data.menus == 'unfinished'"></un-finished>
                    <finished :hide="true" style="margin-left:-20px;" v-if="data.menus == 'finished'"></finished>
                    <my-submit :hide="true" style="margin-left:-20px;" v-if="data.menus == 'submit'"></my-submit>
                    <cc-me :hide="true" style="margin-left:-20px;" v-if="data.menus == 'cc'"></cc-me>
                    <report :hide="true" style="margin-left:-20px;" v-if="data.menus == 'report'"></report>
                    <process-instance-manage :hide="true" style="margin-left:-20px;"
                        v-if="data.menus == 'instances'"></process-instance-manage>
                    <forms-panel :hide="true" style="margin-left:-20px;"
                        v-if="data.menus == 'formsPanel'"></forms-panel>
                    <sub-process :hide="true" style="margin-left:-20px;"
                        v-if="data.menus == 'subProcess'"></sub-process>
                    <role-manage :hide="true" style="margin-left:-20px;"
                        v-if="data.menus == 'roleManage'"></role-manage>
                    <dept-allocation :hide="true" style="margin-left:-20px;"
                        v-if="data.menus == 'deptAllocation'"></dept-allocation>
                    <dictionary-configuration :hide="true" style="margin-left:-20px;"
                        v-if="data.menus == 'dictionaryConfiguration'"></dictionary-configuration>
                    <ErrorInfo :hide="true" style="margin-left:-20px;" v-if="data.menus == 'errorInfo'"></ErrorInfo>
                </div>
            </div>
            <!-- 信息中心 -->
            <div class="sfile-center" v-if="data.selectIndex == 2">
                <Limits />
            </div>
            <!-- 文档管理 -->
            <div class="sfile-center" v-if="data.selectIndex == 3">
                <Document />
            </div>
            <!-- 个人资料修改 -->
            <div class="sfile-center" v-if="data.selectIndex == 4">
                <PersonalData />
            </div>
            <!-- 批量打印 -->
            <div class="sfile-center" v-if="data.selectIndex == 5">
                <BatchPinting />
            </div>
            <!-- 权限分配 -->
            <div class="sfile-center" v-if="data.selectIndex == 6">
                <RoleManage />
            </div>
            <!-- 信息栏管理 -->
            <div class="sfile-center" v-if="data.selectIndex == 7">
                <InforRelease />
            </div>
            <!-- 字典配置 -->
            <div class="sfile-center" v-if="data.selectIndex == 8">
                <dictionaryConfiguration />
            </div>
            <!-- 接口回调 -->
            <div class="sfile-center" v-if="data.selectIndex == 9" style="padding: 5px;">
                <ErrorInfo />
            </div>
            <!-- 轮播图管理 -->
            <div class="sfile-center" v-if="data.selectIndex == 11">
                <carousel />
            </div>
        </div>
        <!-- 主菜单 -->
        <div id="outer" class="main-menu" v-if="data.menu" @click.stop="toggleInner">
            <div id="middle" class="modal-dialog">
                <div class="modal-header">{{ $t('webAuto.mainMenu') }}
                    <span class="pull-right"><el-icon>
                            <InfoFilled />
                        </el-icon></span>
                </div>
                <div class="modal-body">
                    <div class="ng-scope">
                        <div class="ng-binding">{{ $t('webAuto.PersonalCenter') }}</div>
                        <el-row class="row" :gutter="20" style="padding:0 20px">
                            <el-col :span="6" class="grid-col" style=" padding: 0 !important;">
                                <span class="grid-name">{{ $t('webAuto.CommonModules') }}</span>
                                <p class="grid-p" v-for="(item, index) in data.menuOneList" :key="index"
                                    @click="menuOneListClick(item)">{{ item.name }}</p>
                            </el-col>
                            <el-col :span="6" class="grid-col" style=" padding: 0 !important;">
                                <span class="grid-name">{{ $t('webAuto.CommonFunctions') }}</span>
                                <p class="grid-p" v-for="(item, index) in data.menuOneList2" :key="index"
                                    @click="menuOneListClick(item)">{{ item.name }}</p>
                            </el-col>
                            <!-- <el-col :span="6" class="grid-col" style=" padding: 0 !important;">
                                <span class="grid-name" >门户首页</span>
                            </el-col>
                            <el-col :span="6" class="grid-col" style=" padding: 0 !important;">
                                <span class="grid-name" >知识文档</span>
                            </el-col> -->
                        </el-row>
                    </div>
                    <div class="ng-scope">
                        <div class="ng-binding">{{ $t('webAuto.systemConfiguration') }}</div>
                        <el-row class="row" :gutter="20" style="padding:0 20px">
                            <el-col :span="6" class="grid-col" style=" padding: 0 !important;">
                                <span class="grid-name">{{ $t('webAuto.organizationalStructure') }}</span>
                                <p class="grid-p" v-if="data.roles.includes('WFLOW_APPROVAL_ADMIN')"
                                    v-for="(item, index) in data.menutwoList" :key="index"
                                    @click="menuOneListClick(item)">{{
                                        item.name }}</p>
                            </el-col>
                            <el-col :span="6" class="grid-col" style=" padding: 0 !important;">
                                <span class="grid-name">{{ $t('webAuto.PortalSettings') }}</span>
                                <p class="grid-p" v-if="data.roles.includes('WFLOW_APPROVAL_ADMIN')"
                                    v-for="(item, index) in data.menutwoList2" :key="index"
                                    @click="menuOneListClick(item)">{{
                                        item.name }}</p>
                            </el-col>
                            <el-col :span="6" class="grid-col" style=" padding: 0 !important;">
                                <span class="grid-name">{{ $t('webAuto.OtherSettings') }}</span>
                                <p class="grid-p" v-for="(item, index) in data.menutwoList3" :key="index"
                                    @click="menuOneListClick(item)">{{ item.name }}</p>
                            </el-col>
                        </el-row>
                    </div>
                    <!-- <div class="ng-scope">
                        <div class="ng-binding">应该管理</div>
                        <el-row  class="row" :gutter="20" style="padding:0 20px">
                            <el-col :span="6" class="grid-col" style=" padding: 0 !important;">
                                <span class="grid-name" >报表管理</span>
                            </el-col>
                            <el-col :span="6" class="grid-col" style=" padding: 0 !important;">
                                <span class="grid-name" >个人报表</span>
                            </el-col>
                        </el-row>
                    </div> -->
                </div>
            </div>
        </div>

        <!-- 个人中心 -->
        <w-dialog :title="$t('webAuto.PersonalCenter')" v-model="userCenterVisible" @ok="userCenterOk" style="margin-top:50px!important;">
            <el-tabs defaultActive="userInfo" v-if="userCenterVisible" v-model="activeTab" tab-position="left"
                style="min-height: 220px;height:auto;width:100%">
                <!-- <el-tab-pane name="messageNotification" label="消息通知">
                </el-tab-pane> -->
                <el-tab-pane name="userInfo" :label="$t('webAuto.Information')">
                    <personal-data style="width:80%" />
                </el-tab-pane>
                <el-tab-pane name="approvalAgent" :label="$t('webAuto.ApprovalAgency')">
                    <approval-agent ref="agent" />
                </el-tab-pane>
                <el-tab-pane name="other" :label="$t('webAuto.OtherSettings')">{{ $t('webAuto.None') }}</el-tab-pane>
            </el-tabs>
        </w-dialog>
        <!-- 消息提示 -->
        <el-dialog :title="$t('webAuto.ApprovalDetails')" closeFree  style="height: auto;min-height:100%;;width: 100%;margin:0!important;"
           :close-on-click-modal="false" :close-on-press-escape="false"
            v-model="processVisible">
            <instance-preview v-if="processVisible" :instance-id="selectInstance"
                @handler-after="processVisible = false" />
        </el-dialog>
    </div>
</template>

<script>
import ApprovalAgent from '@/views/workspace/my/ApprovalAgent.vue'
import PersonalData from '@/views/home/PersonalData.vue'
import { getUserNotify, readNotify } from '@/api/notify'

export default {
    name: 'home',
    components: { ApprovalAgent, PersonalData },
    data() {
        return {
            timer: null,
            userCenterVisible: false,
            activeTab: 'userInfo',
            selectInstance: null,
            processVisible: false,
            params: {
                pageSize: 5,
                pageNo: 1,
            },
            notify: {
                records: [],
            },
        }
    },
    mounted() {
        this.getUserNotify()
    },
    methods: {
        showUserCenter() {
            this.userCenterVisible = true
        },
        userCenterOk() {
            if (this.activeTab === 'approvalAgent') {
                this.$confirm(
                    this.$t('webAuto.AllApprovalSettings'),
                    this.$t('webAuto.prompt'),
                    {
                        confirmButtonText: this.$t('webAuto.sure'),
                        cancelButtonText: this.$t('webAuto.cancel'),
                        type: 'warning',
                    }
                ).then(() => {
                    this.$refs.agent.setUserAgent(() => {
                        this.userCenterVisible = false
                    })
                })
            }
        },
        toNotify(msg) {
            if (this.$isNotEmpty(msg.instanceId)) {
                this.selectInstance = msg.instanceId
                this.processVisible = true
            }
        },
        readNotifyClick(id) {
            let list = id ? [id] : this.notify.records.map((n) => n.id)
            readNotify(list)
                .then((rsp) => {
                    this.$ok(rsp, this.$t('webAuto.ReadSuccessfully'))
                    this.getUserNotify()
                })
                .catch((err) => {
                    this.$err(err, this.$t('webAuto.ReadFailed'))
                })
        },
        getUserNotify() {
            getUserNotify(this.params).then((res) => {
                this.notify = res.data
            }).catch((err) => {
                if (this.timer) {
                    clearInterval(this.timer)
                }
                this.$err(err, this.$t('webAuto.FailedMessage'))
                this.$router.push('/login')
            })
        }
    },
    watch: {
        params: {
            deep: true,
            handler() {
                this.getUserNotify()
            },
        },
    },
}
</script>


<script setup>
import { reactive, ref, computed, onMounted, watch } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from "vue-router";
import { useStore } from 'vuex';
import { useI18n } from 'vue-i18n';
import { getLang } from '@/i18n/index'
import InstancePreview from '@/views/workspace/approval/ProcessInstancePreview2.vue'

// 流程中心的画面
import FromsApp from '@/views/workspace/oa/FromsApp.vue'
import UnFinished from '@/views/workspace/oa/UnFinished.vue'
import Finished from '@/views/workspace/oa/Finished.vue'
import MySubmit from '@/views/workspace/oa/MySubmit.vue'
import CcMe from '@/views/workspace/oa/CcMe.vue'
import report from '@/views/report/index.vue'
import ProcessInstanceManage from '@/views/admin/ProcessInstanceManage.vue'
import FormsPanel from '@/views/admin/FormsPanel.vue'
import SubProcess from '@/views/admin/SubProcess.vue'
import RoleManage from '@/views/workspace/oa/RoleManage.vue'
import deptAllocation from '@/views/valueSetConfig/deptAllocation/deptAllocation.vue'
import dictionaryConfiguration from '@/views/valueSetConfig/dictionaryConfiguration/dictionaryConfiguration.vue'
import ErrorInfo from '@/views/workspace/oa/ErrorInfo.vue'
import ApprovalAgent from '@/views/workspace/my/ApprovalAgent.vue'
// 其他画面
import WorkSpace from '@/views/home/components/WorkSpace.vue'
import Slideshow from '@/views/home/components/Slideshow.vue'
import Card from '@/views/home/components/Card.vue'
import Flow from '@/views/home/components/Flow.vue'
import Process from '@/views/home/components/Process.vue'
import CardList from '@/views/home/components/CardList.vue'
import Limits from '@/views/home/Limits.vue'
import Document from '@/views/home/Document.vue'
import InforRelease from '@/views/home/InforRelease.vue'
import PersonalData from '@/views/home/PersonalData.vue'
import BatchPinting from '@/views/home/BatchPinting.vue'
import Carousel from '@/views/home/Carousel.vue'

// 接口数据获取
import taskApi from '@/api/processTask'
import taskApi2 from '@/api/modelGroup'
import homeApi from '@/api/home'

const { t } = useI18n();

const route = useRoute();
const router = useRouter();
const store = useStore();
const data = reactive({
    menu: false,
    userCenterVisible: false,
    activeTab: 'userInfo',
    roles: localStorage.getItem('roles') || '', // 角色判断显示权限
    loginName: JSON.parse(localStorage.getItem('loginUser'))?.name || "",
    jobNo: JSON.parse(localStorage.getItem('loginUser'))?.id || "",
    deptName: JSON.parse(localStorage.getItem('loginUser'))?.deptName || "",
    selectIndex: localStorage.getItem('selectIndex') || 0,
    list: [],
    menus: 'forms',
    // 系統
    systemList: [],
    flowList: [],// 常用流程
    mineList: [],//待办
    active: '', //判斷是否為報表中心
    // 主菜单相关
    menuOneList: [],
    menuOneList2: [],
    menutwoList: [],
    menutwoList2: [],
    menutwoList3: [],
    containerList: [],//
    newsList: [],
    noticeList: [],
    trainingList: [],
    managementList: [],
    activityList: [],
    bulletinList: [],
    secureList: [],
    bulleNo: 0,//区分是员工活动还是爱丽简报
})

// 多语言切换
const langIndex = ref()
let langTypes = ["中文", "English", "español"]
let languageList = computed(() => {
    return ["中文", "English", "español"]
})

onMounted(() => {
    // 获取本地是否有wflow-token
    if(!localStorage.getItem('wflow-token')){
        router.push('/login')
    }
    // 获取设置的默认语言
    let langType = localStorage.getItem('lang')
    langIndex.value = langTypes.findIndex(x => x == langType)
    // 页面进入加载默认为待办 中间流程信息
    getMine('我的待办')
    // 选择的菜单
    let a = JSON.parse(localStorage.getItem('menuList'))
    let arr = data.list.filter(x => x.path == a?.path)
    if (!arr.length && a?.path) {
        data.list.push(a)
    }
    initialization()
    // 获取常用列表数据
    homeList()

})

//初始化数据
const initialization = () => {
  data.list =[{
    name: t('title.EnterprisePortal'),
    path: '/Home',
    pathId: 'homePage',
    id: 0,
  }, {
    name: t('title.ProcessCenter'),
    path: '/workspace/forms',
    pathId: 'workspacePage',
    id: 1,
  }]
  data.systemList = [{
    name: t('title.ProcessCenter'),
    imgSrc: "https://work-flow.oss-cn-shanghai.aliyuncs.com/upload/Icon/0CA44D9F4E9A4455AE6D28889535B212.png",
    url: 'workspacePage'
  }, {
    name: t('title.ReportCenter'),
    imgSrc: 'https://work-flow.oss-cn-shanghai.aliyuncs.com/upload/Icon/C3E7F276E54C4FF2BCF437F09097B625.png',
    url: 'reportPage'
  }, {
    name: t('title.DigitalEllie'),
    imgSrc: "https://work-flow.oss-cn-shanghai.aliyuncs.com/upload/Icon/F641FC19DE314D8BB77F54A9CDD24A33.png",
    url: 'http://58.211.226.82:9770/system/itsm/ssoLogin?userNameId=' + data.jobNo
  }, {
    name: t('title.AmericanFactory'),
    imgSrc: 'https://work-flow.oss-cn-shanghai.aliyuncs.com/upload/Icon/4D4EF18B67E740E1955BA34AE8E9AD80.png',
    url: 'http://58.211.226.82:770/system/itsm/ssoLogin?userNameId=' + data.jobNo
  }, {
    name: t('title.EllieWwebsite'),
    imgSrc: 'https://work-flow.oss-cn-shanghai.aliyuncs.com/upload/Icon/306445B06D5945B299F363107A06647F.png',
    url: 'https://www.eletile.com/'
  }, {
    name: t('title.TalentRecommendation'),
    imgSrc: 'https://work-flow.oss-cn-shanghai.aliyuncs.com/upload/Icon/341BD6C18B06409DB63FB9CDA1DCB79A.png',
    url: 'https://www.eletile.com/index/about/join2.html'
  }, {
    name: t('title.MexicanFactory'),
    imgSrc: 'https://work-flow.oss-cn-shanghai.aliyuncs.com/upload/Icon/A1C8DF2273114CECB17AC9C8A09295DB.png',
    url: 'http://58.211.226.82:10002/'
  }, {
    name: t('title.biddingSystem'),
    imgSrc: 'https://work-flow.oss-cn-shanghai.aliyuncs.com/afl-app/img/A6ECF2A6C500484FA6EC05938AD44964.png',
    url: 'http://api.eletile.com:18081/survey/#/?userNameId=' + data.jobNo + '&userName=' + data.loginName
  }]

  data.menuOneList = [{
    name: t('title.InformationCenter'),
    path: '/limits',
    pathId: 'limits',
    id: 2
  }, {
    name: t('title.ProcessCenter'),
    path: '/workspace/forms',
    pathId: 'workspacePage',
    id: 1,
  }, {
    name: t('title.DocumentManagement'),
    path: '/document',
    pathId: 'document',
    id: 3
  }]
  data.menuOneList2 =[{
    name: t('title.PersonalInformationModification'),
    path: '/personalData',
    pathId: 'personalData',
    id: 4
  }, {
    name: t('title.BatchPrinting'),
    path: '/limits',
    pathId: 'limits',
    id: 5
  }]

  data.menutwoList = [{
    name: t('title.PermissionAllocation'),
    path: '/workspace/roleManage',
    pathId: 'workspace/roleManage',
    id: 6
  }]
  data.menutwoList2 =[{
    name: t('title.InformationReleaseColumnManagement'),
    path: '/inforRelease',
    pathId: 'inforRelease',
    id: 7
  }, {
    name: t('title.DictionaryConfiguration'),
    path: '/workspace/dictionaryConfiguration',
    pathId: 'workspace/dictionaryConfiguration',
    id: 8
  }, {
    name: t('title.RotatingPictureManagement'),
    path: '/carousel',
    pathId: 'carousel',
    id: 11
  }]
  data.menutwoList3 =[{
    name: t('title.InterfaceCallback'),
    path: '/workspace/errorInfo',
    pathId: 'workspace/errorInfo',
    id: 9
  }, {
    name: t('title.ReportCenter'),
    path: '/workspace/report',
    pathId: 'workspace/report',
    id: 10
  }]
}

// 多语言切换
const changeLanguage = (index) => {
    langIndex.value = index
    let type = langTypes[index];
    getLang(type)
    // 重新获取数据以更新国际化文本
    initialization()
    // homeList()
    // getMine('我的待办')
}

// 退出登录
const quit = () => {
    router.replace('/login')
}

// 提示
// const getUserInfo = () => {
//     console.log(2323)
//     data.userCenterVisible = true
// }

// 头部的 选项卡切换
const selectTab = (index, item) => {
    data.selectIndex = item.id || index
    store.commit('selectIndexAdd', data.selectIndex)
    localStorage.setItem('selectIndex', data.selectIndex)
    store.commit('menuSelectAdd', item)
    localStorage.setItem('menuList', JSON.stringify(item))
}

const oncFur = (x) => {
    data.menus = x
    watch(() => [data.menus], () => {
        console.log('切换了菜单', data.menus)
    })
}

// 子组件向父组件传递的接收方法
// 我的已办 代办 抄送 和申请
const getMine = (item) => {
    data.mineList = []
    console.log('getMine', item)
    if (item == '我的待办') {
        taskApi.getUserTodoList({
            pageSize: 10,
            pageNo: 1,
            code: '',
        }).then((rsp) => {
            rsp.data.records?.forEach(item => {
                let a = ''
                if (item.formAbstracts.length > 0) {
                    item.formAbstracts?.forEach(x => {
                        a += x.name + x.value + ','
                    })
                }
                item.formAbstracts2 = a
            })
            data.mineList = rsp.data.records
        }).catch((e) => {
            // token过期返回登录
            router.push('/login')
        })
    } else if (item == '我的已办') {
        taskApi.getIdoList({
            pageSize: 10,
            pageNo: 1,
            finished: null,
            code: '',
            startTimes: [],
            processInstanceId: ''
        }).then((rsp) => {
            rsp.data.records?.forEach(item => {
                let a = ''
                if (item.formAbstracts.length > 0) {
                    item.formAbstracts?.forEach(x => {
                        a += x.name + x.value + ','
                    })
                }
                item.formAbstracts2 = a
            })
            data.mineList = rsp.data.records
        }).catch((e) => { })

    } else if (item == '我的申请') {
        taskApi.getUserSubmittedList({
            pageSize: 10,
            pageNo: 1,
            finished: null,
            code: '',
        }).then((rsp) => {
            rsp.data.records?.forEach(item => {
                let a = ''
                if (item.formAbstracts.length > 0) {
                    item.formAbstracts?.forEach(x => {
                        a += x.name + x.value + ','
                    })
                }
                item.formAbstracts2 = a
            })
            data.mineList = rsp.data.records
        }).catch((e) => { })
    } else {
        taskApi2.getCcMeList({
            pageSize: 15,
            pageNo: 1,
            finished: null,
            code: '',
            startTimes: []
        }).then((rsp) => {
            rsp.data.records?.forEach(item => {
                let a = ''
                if (item.formAbstracts.length > 0) {
                    item.formAbstracts?.forEach(x => {
                        a += x.name + x.value + ','
                    })
                }
                item.formAbstracts2 = a
            })
            data.mineList = rsp.data.records
        }).catch((e) => { })
    }

}

// 员工活动 爱丽简报获取
const getList = (item) => {
    console.log('getList', item)
    data.bulleNo = item
    data.containerList = data.bulleNo == 1 ? data.bulletinList : data.activityList
}

// 系统流程 常用流程的子傳遞給父組件的事件操縱
const getSystem = (item) => {
    // data.systemList 流程中心獲取數據
    homeApi.getProcessComunes().then(res => {
        data.flowList = []
        if (res.status == 200) {
            Object.keys(res.data).forEach(key => {
                data.flowList.push({
                    formName: key.split('|')[0],
                    formId: key.split('|')[1],
                    badge: res.data[key],
                    processDefId: key.split('|')[2],
                })
            })
        }
    })

    console.log(item)
    // 判斷是點擊的為流程和報表中心執行
    if (item.url == 'workspacePage') {
        selectTab(1, item)
    } else if (item.url == 'reportPage') {
        selectTab(1, item)
        data.menus = 'report'
        data.active = 'report'
    }
}

// 主菜单
const menusClick = () => {
    data.menu = true
}
// 点击空白隐藏
const toggleInner = (event) => {
    // 检查事件是否来自.inner元素内部
    if (!event.target.closest('#middle')) {
        data.menu = false;
    }
};
// 主菜单里面的点击事件
const menuOneListClick = (item) => {
    data.menu = false //关闭主菜单
    data.selectIndex = item.id
    store.commit('selectIndexAdd', data.selectIndex)
    localStorage.setItem('selectIndex', data.selectIndex)
    if (item.name != '流程中心' && item.name != '报表中心') {
        let a = {
            name: item.name,
            path: item.path,
            pathId: item.pathId,
            id: item.id,
        }
        if(data.list.filter(x => x.path == a.path).length == 0){
            data.list.push(a)
        }
        // 將选择的菜单存储到本地
        store.commit('menuSelectAdd', a)
        ocalStorage.setItem('menuList', JSON.stringify(a))
    } else if (item.name == '报表中心') {
        // 如果是点击的报表中心直接跳转到流程中心的报表
        data.menus = 'report'
        data.active = 'report'
        item.url = "reportPage"
        selectTab(1, { name: t('title.ReportCenter'), imgSrc: 'src/assets/home/report.png', url: 'reportPage' })
    }
}

// 获取数据列表
const homeList = () => {
    homeApi.homePageDataList().then(res => {
        // console.log(res.data)
        res.data.forEach(item => {
            item.record.forEach(a => {
                a.created = removeTime(a.created)
            })
        })
        data.newsList = res.data.filter(x => x.title == '企业新闻')[0]?.record || []
        data.noticeList = res.data.filter(x => x.title == '通知公告')[0]?.record || []
        data.trainingList = res.data.filter(x => x.title == '培训计划')[0]?.record || []
        // data.managementList = res.data.filter(x => x.title == '管理制度')[0]?.record || []
        data.activityList = res.data.filter(x => x.title == '员工活动')[0]?.record || []
        data.bulletinList = res.data.filter(x => x.title == '爱丽简报')[0]?.record || []
        data.secureList = res.data.filter(x => x.title == '安全环保')[0]?.record || []
        // 区分是员工活动还是爱丽简报
        data.containerList = data.bulleNo == 1 ? data.bulletinList : data.activityList
    })
    homeApi.getFileList2('', 'wflow-file').then(res => {
        res.data.records.forEach(item => {
            item.createTime = removeTime(item.createTime)
        })
        data.managementList = res.data.records
    })
}

// 时间去掉时分秒
const removeTime = (dateStr) => {
    const date = new Date(dateStr);
    // 设置时分秒为0
    date.setHours(0, 0, 0, 0);
    // 将Date对象格式化为YYYY-MM-DD字符串
    return date.toISOString().split('T')[0];
}
</script>

<style scoped lang="less">
@import "index.less";

* {
    margin: 0;
    padding: 0;
}

.user-info {
    height: 240px;
    width: 200px;
    text-align: center;
    font-size: 12px;

    // border: .7px solid black;
    .avatar {
        height: 60px;
        width: 60px;
        border-radius: 50%;
        margin: 20px 70px 0 70px;
    }

    .loginName {
        font-family: inherit;
        font-weight: 500;
        color: inherit;
    }

    .job {
        margin-bottom: 10px;
        color: #888;
    }

    .corporation {
        font-weight: 700;
        transition: box-shadow 0.5s, background-color 0.5s, opacity 0.5s
    }

    .profile {
        margin-top: 5px;
        border-top: 1px solid #EEEEEE;

        .profile-boxs {
            margin: 10px auto;
            width: 95px;
            height: 25px;
            border-radius: 5px;
            border: 1px solid #CCCCCC;
            display: flex;

            .profile-avatar {
                width: 50%;
                height: 100%;
                box-sizing: border-box;
                border-right: 1px solid #CCCCCC;
                height: 25px;
                text-align: center;
                color: #333;
                font-size: 13px;
                display: flex;
                flex-direction: row;

                .icon-prfile {
                    border: #333 solid 1px;
                    border-radius: 50%;
                    font-size: 12px;
                    margin: 5px 0 0 3px;
                }

                .profile-text {
                    display: inline-block;
                    line-height: 25px;
                    font-size: 13px;
                }
            }

            .dataInfor {
                border-right: none;

                .icon-prfile2 {
                    border-radius: 50%;
                    font-size: 15px;
                    margin: 5px 0 0 3px;
                }
            }
        }
    }

}

.message {
    margin-right: 10px;
    color: #a2a4a8 !important;

    .icon {
        font-size: 18px;
        color: #a2a4a8 !important;
        padding: 1px;
        cursor: pointer;

        &:hover {
            color: #6d6e70;
        }
    }
}

.notify {
    max-height: 200px;
    background: @theme-aside-bgc;
    overflow-y: auto;

    .notify-item:last-child {
        border-bottom: 2px solid @theme-aside-bgc;
    }

    .notify-item {
        border-top: 2px solid @theme-aside-bgc;
        padding: 5px;
        background: white;
        position: relative;
        border-radius: 5px;

        .notify-item-title {
            cursor: pointer;
            color: #3b3b3b;

            &:hover {
                color: @theme-primary;
            }
        }

        .notify-item-content {
            color: #8c8c8c;
            padding: 5px 0;
            font-size: smaller;
        }

        .notify-item-time {
            position: absolute;
            right: 45px;
            top: 7px;
            font-size: 12px;
            color: #8c8c8c;
        }

        .notify-btn {
            position: absolute;
            right: 5px;
            top: 8px;
        }

        .notify-item-type-icon {
            font-size: 18px;
        }
    }
}
</style>
